
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>
		Demo: Dijit Form widgets
	</title>
	<link rel="stylesheet" href="../libs/demo/demo.css" media="screen" type="text/css">
	<link rel="stylesheet" href="../libs/demo/style.css" media="screen" type="text/css">
	<link rel="stylesheet" href="../libs/dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
	<h1 id="mainHeading">
		Demo: Dijit Form widgets
	</h1>
	<!-- This Demo utilises the declarative style of programming to create the visual elements -->
	<div data-dojo-type="dijit/form/Form" id="myForm" enctype="multipart/form-data" action="" method="">
		<table style="border: 1px solid #9f9f9f;" cellspacing="10">
			<tr>
				<td>
					<label for="firstname">Name:</label>
				</td>
				<td>
					<input type="text" id="firstname" dojo-data-id="firstname" data-dojo-type="dijit/form/TextBox" name="firstname" trim="true" id="firstname" propercase="true"></input>
				</td>
			</tr>
			<tr>
				<td>
					<label for="dob">Date of birth:</label>
				</td>
				<td>
					<input type="text" dojo-data-id="dob" id="dob" name="dob" data-dojo-type="dijit/form/DateTextBox" value="2011-03-11"></input>
				</td>
			</tr>
			<tr>
				<td>
					<label for="country">Country of Origin:</label>
				</td>
				<td>
					<div data-dojo-id="countryStore" data-dojo-type="dojo/store/JsonRest" data-dojo-props="target:'../resources/countries.json'"></div>
					<select dojo-data-id="country" id="country" name="country" 
 						data-dojo-props="store: countryStore"
						data-dojo-type="dijit/form/FilteringSelect"></select>
				</td>
			</tr>
			<tr>
				<td>

				</td>
				<td>
					<button type="submit" data-dojo-type="dijit/form/Button">Submit Form</button>
				</td>
			</tr>
		</table>
	</div>

<script src="../libs/dojo/dojo.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
	 <script>
        var dojoConfig = {
            async: true,
            baseUrl:'../',
			packages: [  
        	{ name: "dojo", location: "libs/dojo" },  
        	{ name: "dijit", location: "libs/dijit" },  
        	{ name: "dojox", location: "libs/dojox" }

			] 
        };
    </script>
	<script>
		require([
			"dojo/parser",
			"dijit/form/TextBox",
			"dijit/form/DateTextBox",
			"dijit/form/FilteringSelect",
			"dijit/form/Form",
			"dojo/store/JsonRest",
			"dijit/form/Button",
			"dojo/domReady!"
		], function(parser){
			parser.parse();
		});
	</script>
</body>
</html>
